<template>
  <div>
    <!-- 面包屑导航栏 -->
    <AppBreadcrumb :breadcrumbs="breadcrumbs" :breadcrumbItemStyle="breadcrumbItemStyle" />

    <!-- 考试标题和状态 -->
    <div class="info" @click="navigateToExams">
      <img src="@/assets/picture/arrow-left.png" alt="返回" class="arrow-icon" />
      <h2 class="title">{{examTitle}}</h2>
      <span class="badge" :class="statusBadgeClass">{{ statusLabel }}</span>
    </div>

    <!-- 导航栏 -->
    <nav class="nav-container"  v-if="showNav">
      <router-link 
        :to="{ name: 'StuPaperPreview', params: { examId, semesterId } }" 
        class="nav-tab"
      >
        试卷预览
      </router-link>
      <router-link 
        :to="{ name: 'StuAnswerReview', params: { examId, semesterId } }" 
        class="nav-tab"
      >
        作答情况
      </router-link>
      <router-link 
        :to="{ name: 'StuExamSettings', params: { examId, semesterId } }" 
        class="nav-tab"
      >
        规则设置
      </router-link>
    </nav>
  </div>
</template>

<script>import { ref,computed,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import AppBreadcrumb from '@/components/Breadcrumb.vue';
import { fetchClassDetails } from '@/services/api';

// 保持与AssignmentNavBar相同的逻辑结构
export default {
    components: {
    AppBreadcrumb,
  },
  props:{
      showNav: { 
      type: Boolean,
      default: true
    }
  },
  setup() {
    const examStatus = ref(localStorage.getItem('currentExamStatus') || '新建中');
    const examTitle = ref(localStorage.getItem('currentExamTitle') || '试卷名');
    const route = useRoute();
    const router = useRouter();
    const semesterId = computed(() => route.params.semesterId);
    const examId = computed(() => route.params.examId);
    
    const breadcrumbItemStyle = ref({
      textDecoration: 'none',
      color: 'gray',
      fontSize: '14px',
      margin:'0px 0px -20px -4px',
    });

    const courseName = ref(''); // 添加课程名称引用
const loadCourseName = async () => {
  try {
    const response = await fetchClassDetails(semesterId.value, localStorage.getItem('id'));
    if (response.data.status === 1) {
      courseName.value = response.data.data.semester_name;
    }
  } catch (error) {
    console.error('加载课程详情失败:', error);
  }
};

// 考试状态计算属性
const statusLabel = computed(() => {
  switch(examStatus.value) {
    case '0': return '未开始';
    case '1': return '进行中';
    case '2': return '已截止';
    default: return '新建中';
  }
});

const statusBadgeClass = computed(() => {
  switch(examStatus.value) {
    case '0': return 'badge-unstart';
    case '1': return 'badge-in-progress';
    case '2': return 'badge-closed';
    default: return 'badge-new';
  }
});

    const breadcrumbs = computed(() => [
        {
          path: `/student-management/${semesterId.value}/StuNoti`,
          label: courseName.value || '课程',
        },
        {
          path: `/student-management/${semesterId.value}/StuExams`,
          label: '在线考试',
        },
        {
          path: route.path,
          label: route.meta.breadcrumb || route.name,
        },
      ]);

    
    // 导航回到考试列表页
    const navigateToExams = () => {
     router.push({
        path: `/student-management/${semesterId.value}/StuExams`,});
    };
    // 状态管理逻辑...

    onMounted(() => {
  loadCourseName();
});
     return {
      breadcrumbs,
      breadcrumbItemStyle,
      statusLabel,
      statusBadgeClass,
      navigateToExams, // 导航方法
      semesterId, 
      examId,
      courseName,
      examTitle
    };
  }
}
</script>

<style scoped>
/* 导航容器基础样式 */
.nav-container {
  display: flex;
  gap: 1px;
  background-color: #FAFAFA;
  width: 100%;
  max-width: 700px !important;
  margin: 0px !important;
}

/* 导航标签通用样式 */
.nav-tab {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  text-decoration: none;
  color: rgba(102, 102, 102, 0.778);
  font-size: 16px;
  transition: all 0.3s;
  background-color: #f9f9f9;
  border-radius: 10px 10px 0 0;
  max-width: 130px;
}

.nav-tab:not(.router-link-exact-active) {
  background-color: #f5f5f5;
}

.nav-tab.router-link-exact-active {
  font-weight: bold;
  color: #333;
  background-color: #ffffff;
}

/* 状态徽章通用样式 */
.badge {
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 14px;
}



.badge {
  padding: 5px 10px;
  border-radius: 12px;
  font-size: 14px;
}
.info{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0px;
    font-size: 16px;
    cursor: pointer;
    height: 55px;
}
.arrow-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: none;
}

.badge-unpublished {
  background-color: #ffd6d6;
  color: #d9534f;
}

.badge-unstart {
  background-color: #cae2f9;
  color: #519bd5;
}

.badge-in-progress {
  background-color: #d6ffdb;
  color: #3b995c;
}

.badge-closed {
  background-color: #f0f0f0;
  color: #666;
}
.badge-new{
    background-color: #f3e4b7f0;
  color:  #dda90ff0;
}

</style>
